<template>
  <px-tooltip effect="light" :disabled="isShowTooltip" :content="content" :placement="placement" :visible="visible">
    <div
      :ref="setItemRef"
      class="margin10 tooltip"
      :style="isShowTooltip == false ? 'cursor: pointer;' : ''"
      popper-class="table-tooltip"
      @mouseover="onMouseOver(refName)"
      @mouseleave="visible = false"
    >
      {{ content }}
    </div>
  </px-tooltip>
</template>

<script lang="ts" setup>
import { ref } from "vue";
// 当鼠标离开当前内容位置时，立即隐藏弹出层内容
const visible = ref(false);
const props = defineProps({
  // 显示的文字内容
  content: {
    type: String,
    default: ""
  },
  // 显示的文字位置
  placement: {
    type: String,
    default: "top"
  },
  // 外层框的样式，在传入的这个类名中设置文字显示的宽度
  className: {
    type: String,
    default: "w100"
  },
  // 为页面文字标识（如在同一页面中调用多次组件，此参数不可重复）
  refName: {
    type: String,
    default: ""
  }
});

const iframeRefs = ref({});
const setItemRef = (el, key) => {
  if (el) {
    iframeRefs.value[props.refName] = el;
  }
};
const isShowTooltip = ref(true);
const onMouseOver = str => {
  visible.value = true;
  let parentWidth = iframeRefs.value[str].parentNode.offsetWidth;
  let contentWidth = iframeRefs.value[str].scrollWidth;
  // 判断是否开启tooltip功能
  if (contentWidth > parentWidth) {
    isShowTooltip.value = false;
  } else {
    isShowTooltip.value = true;
  }
};
</script>

<style scoped>
.tooltip {
  display: -webkit-box;
  display: -moz-box;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}

.table-tooltip {
  transition: transform 0.3s var(--px-transition-function-fast-bezier);
}
</style>
